<template>
    <div class="guihua-add">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>规划规划</el-breadcrumb-item>
            <el-breadcrumb-item>专项发展规划</el-breadcrumb-item>
            <el-breadcrumb-item>{{id?'编辑':'新增'}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="addContainer">
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="150px"
                class="addForm"
            >
                <h3 class="title">
                    <i></i>
                    编制规划基本信息
                </h3>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="规划名称" prop="planName">
                            <el-input placeholder="请输入规划名称" v-model="ruleForm.planName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="规划编号" prop="planNo">
                            <el-input placeholder="请输入规划编号" v-model="ruleForm.planNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="开始年份" prop="planBeginTime">
                            <el-select v-model="ruleForm.planBeginTime">
                                <el-option :label="2020" :value="2020"></el-option>
                                <el-option :label="2021" :value="2021"></el-option>
                                <el-option :label="2022" :value="2022"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="截止年份" prop="planEndTime">
                            <el-select v-model="ruleForm.planEndTime">
                                <el-option :label="2020" :value="2020"></el-option>
                                <el-option :label="2021" :value="2021"></el-option>
                                <el-option :label="2022" :value="2022"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="编制单位" prop="compileUnitId">
                            <el-select v-model="ruleForm.compileUnitId" @change="compileUnitChange">
                                <el-option v-for="item in compileUnit" :value="item.vlaue" :label="item.label" :key="item.label"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="编制人" prop="compilePerson">
                            <el-input placeholder="请输入编制人" v-model="ruleForm.compilePerson"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="编制时间" prop="compileTime">
                            <el-date-picker
                                v-model="ruleForm.compileTime"
                                align="right"
                                type="date"
                                placeholder="请选择编制时间"
                                :picker-options="pickerOptions"
                                value-format="yyyy-MM-dd"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="compileAttachmentFileList">
                        <el-form-item label="上传规划" prop="name">
                            <el-upload
								:before-remove="compileRemoveFile"
                                :data="{fileType: 18}"
                                name="multipartFiles"
                                class="upload-demo"
                                :action="$config.API_URL + '/file/upload'"
                                :on-change="compileHandleChange"
                                :file-list="compileAttachmentFileList"
								:limit="1"
                            >
                                <el-button size="small" icon="el-icon-upload">选择上传文件</el-button>
                                <div
                                    slot="tip"
                                    class="el-upload__tip"
                                >只能上传jpg/png/word/pdf/zip/excle/ppt格式文件，文件不能超过50MB</div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="建设内容" prop="remark">
                            <el-input :rows="3" type="textarea" placeholder="请输入内容" v-model="ruleForm.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <h3 class="title">
                    <i></i>
                    编制规划审定
                </h3>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="审定人" prop="auditPerson">
                            <el-input placeholder="请输入审定人" v-model="ruleForm.auditPerson"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="审定时间" prop="auditTime">
                            <el-date-picker
                                v-model="ruleForm.auditTime"
                                align="right"
                                type="date"
                                placeholder="请选择审定时间"
                                :picker-options="pickerOptions"
                                value-format="yyyy-MM-dd"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="fileList">
                        <el-form-item label="上传附件" prop="name">
                            <el-upload
								:before-remove="auditRemoveFile"
                                :data="{fileType: 18}"
                                name="multipartFiles"
                                class="upload-demo"
                                :action="$config.API_URL + '/file/upload'"
                                :on-change="auditHandleChange"
                                :file-list="auditAttachmentFileList"
								:limit="1"
                            >
                                <el-button size="small" icon="el-icon-upload">选择上传文件</el-button>
                                <div
                                    slot="tip"
                                    class="el-upload__tip"
                                >只能上传jpg/png/word/pdf/zip/excle/ppt格式文件，文件不能超过50MB</div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="审定结果" prop="auditResult">
                            <el-select v-model="ruleForm.auditResult">
                                <el-option label="审定通过" :value="1"></el-option>
                                <el-option label="审定不通过" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="审定意见" prop="auditOpinion">
                            <el-input :rows="3" type="textarea" placeholder="请输入内容" v-model="ruleForm.auditOpinion"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <h3 class="title">
                    <i></i>
                    编制规划批准<span style="margin-left: 20px;font-size: 14px; color: #999999;">市新型智慧城市建设管理应用领导小组审定</span>
                </h3>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="批准人" prop="approvalPerson">
                            <el-input placeholder="请输入批准人" v-model="ruleForm.approvalPerson"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="批准时间" prop="approvalTime">
                            <el-date-picker
                                v-model="ruleForm.approvalTime"
                                align="right"
                                type="date"
                                placeholder="请选择批准时间"
                                :picker-options="pickerOptions"
                                value-format="yyyy-MM-dd"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="批准结果" prop="isApproval">
                            <el-select v-model="ruleForm.isApproval">
                                <el-option label="审定通过" :value="1"></el-option>
                                <el-option label="审定不通过" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="批准意见" prop="approvalOpinion">
                            <el-input :rows="3" type="textarea" placeholder="请输入内容" v-model="ruleForm.approvalOpinion"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="operateBtn">
            <el-button plain @click="cancel">取消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm', 2)">提交</el-button>
            <el-button plain @click="submitForm('ruleForm', 1)">保存</el-button>
        </div>
    </div>
</template>

<script>
/* eslint-disable */
export default {
    data() {
        return {
            pickerOptions: {
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        }
                    }
                ]
            },
            compileUnit: [
                {vlaue: 1, label: '长沙市公安局'},
                {vlaue: 2, label: '长沙市税务局'},
                {vlaue: 3, label: '长沙市财政局'}
            ],
            ruleForm: {
				planName: "",
				planNo: "",
				planBeginTime: "",
                planEndTime: "",
                compileUnitId: null,
                compileUnit: '',
                compilePerson: "",
                compileTime: "",
                compileAttachmentId: '',
                compileFileType: null,
                remark: '',
                auditPerson: '',
                auditTime: '',
                auditResult: null,
                auditAttachmentId: '',
                auditFileType: null,
                auditOpinion: '',
                approvalPerson: '',
                approvalTime: '',
                isApproval: null,
                approvalOpinion: '',
                isDelete: 1
            },
            id: null,
            rules: {
                planName: [
                    {
                        required: true,
                        message: "请输入规划名称",
                        trigger: "blur"
                    }
                ],
                planNo: [
                    {
                        required: true,
                        message: "请输入规划编号",
                        trigger: "blur"
                    }
                ],
                planBeginTime: [
                    {
                        required: true,
                        message: "开始年份",
                        trigger: "change"
                    }
                ],
                planEndTime: [
                    {
                        required: true,
                        message: "截止年份",
                        trigger: "change"
                    }
                ],
                auditPerson: [
                    {
                        required: true,
                        message: "请输入审定人",
                        trigger: "blur"
                    }
                ],
                auditTime: [
                    {
                        required: true,
                        message: "请选择审定时间",
                        trigger: "change"
                    }
                ],
                auditResult: [
                    {
                        required: true,
                        message: "请选择审定结果",
                        trigger: "change"
                    }
                ],
                approvalPerson: [
                    {
                        required: true,
                        message: "请输入批准人",
                        trigger: "blur"
                    }
                ],
                approvalTime: [
                    {
                        required: true,
                        message: "请选择批准时间",
                        trigger: "change"
                    }
                ],
                isApproval: [
                    {
                        required: true,
                        message: "请选择批准结果",
                        trigger: "change"
                    }
                ]
			},
			compileAttachmentFileList: [],
			auditAttachmentFileList: [],
        };
    },
    mounted() {
        this.id = this.$route.query.id;
        if (this.id) {
            this.getDetail();
        }
    },
    methods: {
        // 获取详情
        getDetail() {
            this.axios
                .get("/cityPlan/getOne", { params: { id: this.id } })
                .then(res => {
                    this.ruleForm = Object.assign(this.ruleForm, res.data);
                });
        },
		// 提交表单
        submitForm(formName, status) {
            this.$refs[formName].validate(valid => {
                if (valid) {
					this.ruleForm.currentState = status;
					this.ruleForm.planBeginTime = this.ruleForm.planBeginTime + '-01-01 00:00:00';
					this.ruleForm.planEndTime = this.ruleForm.planEndTime + '-01-01 00:00:00';
					this.ruleForm.compileTime = this.ruleForm.compileTime + ' 00:00:00';
					this.ruleForm.auditTime = this.ruleForm.auditTime + ' 00:00:00';
					this.ruleForm.approvalTime = this.ruleForm.approvalTime + ' 00:00:00';
					this.axios.post('/cityPlan/insert', this.ruleForm).then(res => {
						this.$router.go(-1);
					})				
                } else {
                    this.$message.error("请填写带*的必填项！");
                    return false;
                }
            });
		},
		// 取消
        cancel() {
            this.$router.go(-1);
        },
        compileHandleChange(file, fileList) {
			if (file.response) {
                this.ruleForm.compileAttachmentId = file.response.data.attachmentId;
                this.ruleForm.compileFileType = file.response.data.fileType;
			}
		},
        auditHandleChange(file, fileList) {
			if (file.response) {
                this.ruleForm.auditAttachmentId = file.response.data.attachmentId;
                this.ruleForm.auditFileType = file.response.data.fileType;
			}
		},
		compileRemoveFile(file) {
			this.ruleForm.compileAttachmentId = null;
        },
		auditRemoveFile(file) {
			this.ruleForm.auditAttachmentId = null;
        },
        compileUnitChange(val) {
            let obj = this.compileUnit.find(i => i.vlaue == val);
            if (obj) {
                this.ruleForm.compileUnit = obj.label;
            }
        }
    }
};
</script>

<style lang="less" scoped>
.guihua-add {
    width: 1205px;
    .addContainer {
        margin-top: 20px;
        padding: 20px;
        background-color: #fff;
        .addForm {
            .el-row {
                border: 1px solid rgba(238, 238, 238, 1);
                border-bottom: none;
                .el-col {
                    border-bottom: 1px solid rgba(238, 238, 238, 1);
                }
            }
            .el-select,
            .el-input {
                width: 100%;
            }
        }

        .title {
            font-size: 18px;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            i {
                width: 4px;
                height: 16px;
                display: inline-block;
                background-color: #4967cf;
                margin-right: 6px;
            }
        }
    }
    .operateBtn {
        text-align: center;
        padding-top: 30px;
        .el-button--small {
            padding: 9px 30px;
        }
    }
    .fileList {
        .uploadBox {
            width: 114px;
            height: 58px;
            border-radius: 4px;
			border: 2px dashed rgba(160, 179, 244, 1);
			display: flex;
			flex-direction: column;
			.el-icon-plus {
				font-size: 26px;
				color: #4967CF;
			}
		}
		.upload-demo {
			padding: 11px 16px;
			width: 500px;
		}
    }
}
</style>
<style lang="less">
.addForm {
    .el-form-item {
        margin-bottom: 0;
	}
	.el-input {
		height: 40px;
		line-height: 40px;
	}
    .el-input__inner,
    .el-textarea__inner {
        border: none !important;
    }
    .el-form-item__label {
        background-color: #fafafa;
        min-height: 40px;
        line-height: 40px;
	}
	.el-form-item__error {
		display: none;
	}
}
</style>
